<template>
	<view>
		<view class="formModel">
			<view  class="cu-form-group">
				<view class="title">土地类型</view>
				<picker @change="PickerChange" :value="index" :range="landType">
					<view class="picker">
						{{index>-1?landType[index]:"请选择"}}
					</view>
				</picker>
			</view>
			
			<view  class="cu-form-group">
				<view class="title">所在地区</view>
				<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
					<view class="picker">
						<text  v-if="regionName">{{regionName}}</text>
						<text v-else>点击选择省市区</text>
					</view>
				</pick-regions>
			</view>
			<view class="cu-form-group">
				<view class="title">详细地址</view>
				<input  placeholder="请输入详细地址" name="input"></input>
			</view>
			
			<view class="cu-form-group">
				<view class="title">土地期限</view>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="picker">{{date}}</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">租让时间</view>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="picker">{{date}}</view>
				</picker>
			</view>
			<view  class="cu-form-group">
				<view class="title">流转类型</view>
				<picker @change="exchangeChange" :value="exchangeIndex" :range="exchange">
					<view class="picker">
						{{exchangeIndex>-1?exchange[exchangeIndex]:"请选择"}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">金额范围</view>
				<input type="digit" placeholder="请输入金额" maxlength="15" name="input"></input><text>单位/万元</text>
			</view>
			
			<view class="imageUp">
				<view class="cu-bar bg-white" style="justify-content: space-between;margin-top:5rpx">
					<view class="action">
						土地图片上传
					</view>
					<view class="action" style="font-size: 30rpx;">
						{{imgList.length}}/{{maxImg}}
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
							<image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="imgList.length<9">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</view>
			<!-- 身份证图片上传 -->
			<view class="imageUp">
				<view class="cu-bar bg-white" style="justify-content: space-between;margin-top:5rpx">
					<view class="action">
						身份证图片上传
					</view>
					<view class="action" style="font-size: 30rpx;">
						{{idList.length}}/{{idMaxImg}}
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in idList" :key="index" @tap="idViewImage" :data-url="idList[index]">
							<image :src="idList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="idDelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="idChooseImage" v-if="idList.length<1">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</view>
			<!-- 土地权证 -->
			<view class="imageUp">
				<view class="cu-bar bg-white" style="justify-content: space-between;margin-top:5rpx">
					<view class="action">
						土地权证上传
					</view>
					<view class="action" style="font-size: 30rpx;">
						{{landList.length}}/{{landMaxImg}}
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in landList" :key="index" @tap="landViewImage" :data-url="landList[index]">
							<image :src="landList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="landDelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="landChooseImage" v-if="landList.length<1">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">土地权证证号</view>
				<input type="digit" placeholder="请输入土地权证证号" maxlength="15" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">土地简介：</view>
			</view>
			<view class="cu-form-group ">
				<textarea maxlength="-1"   @input="textareaAInput" placeholder="可输入土地状况,价值说明,对融资者的要求等信息"></textarea>
			</view>
			<view class="cu-form-group">
				<view class="title">土地流转历史：</view>
			</view>
			<view class="cu-form-group ">
				<textarea maxlength="-1"   @input="textareaAInput" placeholder="土地的流转历史"></textarea>
			</view>
			<view class="cu-form-group">
				<view class="title">土地联系人</view>
				<input type="digit" placeholder="请输入联系人名字" maxlength="7" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">土地联系人电话</view>
				<input type="digit" placeholder="请输入联系人电话" maxlength="11" name="input"></input>
			</view>
		</view>
		<view  class="submit"><button  class="">修改</button></view>
	</view>
</template>
<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	function getDate(type) {
		const date = new Date();
	
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
	
		return `${year}-${month}-${day}`;
	}
	export default {
		components:{ pickRegions },
		computed:{
		    regionName(){
		        // 转为字符串
		        return this.region.map(item=>item.name).join(' ')
		    }
		},
		data() {
			return {
				//三级联动
				region:[],
				defaultRegion:['广东省','广州市','番禺区'],
				defaultRegionCode:'440113',
				
				
				date: getDate({
					format: true
				}),
				startDate:getDate('start'),
				endDate:getDate('end'),
				time: '',//ui库
				index: -1,
				landType: ['耕地', '林地', '园地', '草地', '养殖用地', '工矿仓储', '商业住宅'],
				exchange:['转让','出租','转包','合作','入股'],
				exchangeIndex:-1,
				area:[],//全国各地区
				
				imgList: [],//土地图片
				maxImg:9,//土地图片
				
				idList: [],//身份证图片
				idMaxImg:1,//身份证图片
				
				landList: [],//土地权证图片
				landMaxImg:1,//土地权证图片
				
			
			};
		},
		onNavigationBarButtonTap(e) {
			setTimeout(() => {
				this.toRedact(this.judge)
			}, 80)
		},
		onReady() {
		// this.a();
		},
		onLoad() {

		},
		methods: {
		// 获取选择的地区
		handleGetRegion(region){
		    this.region = region
		},
		
			//多行文本框
			textareaAInput(e) {
				// console.log(this.postscript)
			},
		// 	a(){
		// 		JSON.parent(nationwide) = this.area;
		// console.log(nationwide);
		// console.log(this.area);
		// 	},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			//土地类型选择
			PickerChange(e) {
				this.index = e.detail.value
			},
			//流转类型选择
			exchangeChange(e){
				this.exchangeIndex=e.detail.value
			},
			
			//验证手机号
			isPhone() {
				let regex = {
					mobile: /^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/
				};
				return regex.mobile.test(this.phone);
			},
			isStandbyPhone() {
				let regex = {
					mobile: /^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/
				};
				return regex.mobile.test(this.standbyPhone);
			},
//土地图片
			ChooseImage() {
				uni.chooseImage({
					count:this.maxImg-this.imgList.length, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
							if (this.imgList.length > 0) {
								for (let i = 0; i < this.imgList.length; i++) {
								}
							}
							console.log(this.imgList)
						} else {
							this.imgList = res.tempFilePaths;
							console.log(this.imgList)
							if (this.imgList.length > 0) {
								for (let i = 0; i < this.imgList.length; i++) {
								}
							}
						}
					}
				});
			},
			//预览图片
			ViewImage(e) {
				console.log(e)
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			//取消上传
			DelImg(e) {
				console.log(e)
				uni.showModal({
					title: '提示',
					content: '确定要取消该照片的上传吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
							
						}
					}
				})
			},
//身份证图片
			idChooseImage() {
				uni.chooseImage({
					count:1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.idList.length != 0) {
							this.idList = this.idList.concat(res.tempFilePaths)
							if (this.idList.length > 0) {
								for (let i = 0; i < this.idList.length; i++) {
								}
							}
							console.log(this.idList)
						} else {
							this.idList = res.tempFilePaths;
							console.log(this.idList)
							if (this.idList.length > 0) {
								for (let i = 0; i < this.idList.length; i++) {
								}
							}
						}
					}
				});
			},
			//预览图片
			idViewImage(e) {
				console.log(e)
				uni.previewImage({
					urls: this.idList,
					current: e.currentTarget.dataset.url
				});
			},
			//取消上传
			idDelImg(e) {
				console.log(e)
				uni.showModal({
					title: '提示',
					content: '确定要取消该照片的上传吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.idList.splice(e.currentTarget.dataset.index, 1)
							
						}
					}
				})
			},
//土地权限图片
			landChooseImage() {
				uni.chooseImage({
					count:this.landMaxImg-this.landList.length, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.landList.length != 0) {
							this.landList = this.landList.concat(res.tempFilePaths)
							if (this.landList.length > 0) {
								for (let i = 0; i < this.landList.length; i++) {
								}
							}
							console.log(this.landList)
						} else {
							this.landList = res.tempFilePaths;
							console.log(this.landList)
							if (this.landList.length > 0) {
								for (let i = 0; i < this.landList.length; i++) {
								}
							}
						}
					}
				});
			},
			//预览图片
			landViewImage(e) {
				console.log(e)
				uni.previewImage({
					urls: this.landList,
					current: e.currentTarget.dataset.url
				});
			},
			//取消上传
			landDelImg(e) {
				console.log(e)
				uni.showModal({
					title: '提示',
					content: '确定要取消该照片的上传吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.landList.splice(e.currentTarget.dataset.index, 1)
							
						}
					}
				})
			}

		}
	}
</script>

<style lang="less" scoped>
	@import "../../../common/colorui/main.css";
	@import "../../../common/colorui/icon.css";
	@import "../../../common/global.less";

	page {}
.submit {
		width: 700rpx;
		height: 150rpx;
		margin-left: 25rpx;
		margin-top: 40rpx;
		>button {
			background: #34AB68;
			color: white;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 32rpx;
		}
	}
	.placeholderClass {
		color: #eaeaea;
	}

	.mapText {
		font-size: 28upx;
	}

	.RadioStyle {
		radio {
			margin-right: 10rpx;
			font-size: 30rpx;
		}
	}

	.bottomModel {
		margin-top: 50rpx;
		// .butStyle{font-size: 30rpx; border-radius: 90rpx;width: 600rpx; height:80rpx;line-height: 80rpx;color:#FFFFFF; background-color:@maincolor;}
	}

	.formModel {
		background-color: @backcolorthree;
		border-bottom: 2rpx solid #eaeaea;

		.cu-form-group {
			.title {
				min-width: calc(4em + 15px);
			}
		}
	}
</style>
